<template>
  <div class="p-5 bg-white dark:bg-[var(--next-color-disabled)] rounded-lg transition-colors duration-300">
    <!-- 表单类型选择 -->
    <div class="mb-6">
      <el-radio-group v-model="flowStore.step2.formType" class="flex gap-4 w-full">
        <el-radio
          v-for="option in BpmModelFormTypeOptions"
          :key="option.value"
          :label="option.value"
          class="flex-1"
        >
          <div class="relative flex flex-col p-4 px-5 border-2 border-gray-200 dark:border-[var(--next-border-color)] rounded-xl transition-all duration-300 cursor-pointer hover:border-blue-500 dark:hover:border-[#1d9bf0] hover:bg-blue-50 dark:hover:bg-[var(--next-color-hover)] dark:bg-[var(--next-color-primary)] hover:shadow-lg hover:shadow-blue-500/20 dark:hover:shadow-[#1d9bf0]/20 group">
            <div class="flex items-center justify-between mb-2">
              <span class="font-semibold text-lg text-gray-800 dark:text-[var(--next-color-white)] group-hover:text-blue-600 dark:group-hover:text-[#1d9bf0] transition-colors">{{ option.label }}</span>
              <div class="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-[var(--next-border-color)] group-hover:border-blue-500 dark:group-hover:border-[#1d9bf0] transition-colors flex items-center justify-center">
                <div class="w-2.5 h-2.5 rounded-full bg-blue-500 dark:bg-[#1d9bf0] opacity-0 group-hover:opacity-100 transition-opacity"></div>
              </div>
            </div>
            <span class="text-sm text-gray-600 dark:text-[var(--next-text-color-regular)] group-hover:text-gray-700 dark:group-hover:text-[var(--next-text-color-regular)] leading-relaxed">{{ option.description }}</span>
          </div>
        </el-radio>
      </el-radio-group>
    </div>

    <!-- 动态表单配置 -->
    <div v-if="flowStore.step2.formType === BpmModelFormType.NORMAL" class="mb-6">
      <!-- 表单设计器 -->
      <div class="border border-gray-300 dark:border-[var(--next-border-color)] rounded-md overflow-hidden">
        <div class="bg-white dark:bg-[var(--next-color-disabled)]">
          <fc-designer 
            ref="designerRef" 
            height="70vh" 
            :config="designerConfig"
            @save="handleDesignerSave"
          />
        </div>
      </div>
    </div>

    <!-- 自定义表单配置 -->
    <div v-if="flowStore.step2.formType === BpmModelFormType.CUSTOM" class="mb-6">
      <div class="flex items-center text-base font-semibold text-gray-800 dark:text-[var(--next-color-white)] mb-4">
        <el-icon class="mr-2 text-blue-500 dark:text-[#1d9bf0]"><Link /></el-icon>
        自定义表单配置
      </div>
      
      <el-form :model="flowStore.step2" :rules="customFormRules" ref="customFormRef" label-width="140px">
        <el-form-item label="表单提交路径" prop="formCustomCreatePath" class="mb-4">
          <el-input
            v-model="flowStore.step2.formCustomCreatePath"
            placeholder="例如：/flow/oaLeave/create.vue"
            class="w-full"
          />
          <div class="flex items-center mt-1 text-xs text-gray-600 dark:text-[var(--next-text-color-regular)]">
            <el-icon class="mr-1 text-gray-500 dark:text-[var(--next-text-color-placeholder)]"><InfoFilled /></el-icon>
            自定义表单的提交路径，使用Vue的路由地址
          </div>
        </el-form-item>
        
        <el-form-item label="表单查看路径" prop="formCustomViewPath" class="mb-4">
          <el-input
            v-model="flowStore.step2.formCustomViewPath"
            placeholder="例如：/flow/oaLeave/detail.vue"
            class="w-full"
          />
          <div class="flex items-center mt-1 text-xs text-gray-600 dark:text-[var(--next-text-color-regular)]">
            <el-icon class="mr-1 text-gray-500 dark:text-[var(--next-text-color-placeholder)]"><InfoFilled /></el-icon>
            自定义表单的查看路径，用于流程详情页面展示
          </div>
        </el-form-item>
      </el-form>

      <!-- 自定义表单示例说明 -->
      <div class="mt-4 p-4 bg-blue-50 dark:bg-[rgba(29,155,240,0.1)] rounded-md transition-colors duration-300">
        <div class="flex items-center font-medium text-gray-800 dark:text-[var(--next-color-white)] mb-3">
          <el-icon class="mr-2 text-blue-500 dark:text-[#1d9bf0]"><QuestionFilled /></el-icon>
          使用说明
        </div>
        <div>
          <ol>
            <li>表单提交路径：用户发起流程时访问的页面路径</li>
            <li>表单查看路径：流程实例详情页面中展示表单的路径</li>
            <li>路径格式：以 "/" 开头的完整页面路径，如：/flow/oaLeave/create.vue</li>
            <li>自定义表单需要在对应路径创建Vue组件</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Document, Setting, Link, InfoFilled, QuestionFilled, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FcDesigner from 'form-create-designer'
import FormCreate from '@form-create/element-ui'
import type { Config, DragRule } from 'form-create-designer'
import { BpmModelFormType, BpmModelFormTypeOptions, type FormDesignData } from '../form/const/constants'
import type { FormRules } from 'element-plus'
import { rules } from '../form/const/form-rules'
import { useFlowStore } from '../workflow/stores/flow'
import { CommonHeaderEnum } from '/@/utils/request'
import { Session } from '/@/utils/storage'

// Refs
const designerRef = ref<InstanceType<typeof FcDesigner> | null>(null)
const customFormRef = ref()
const flowStore = useFlowStore()

// 初始化标记，防止重复初始化
const isDesignerInitialized = ref(false)

// 设计器配置
const designerConfig: Config = {
  fieldReadonly: false,
  showSaveBtn: true, // 隐藏默认保存按钮，使用自定义按钮
  showDevice: false,
  hiddenItem: ['upload'], // 隐藏上传组件
}

// 自定义表单验证规则
const customFormRules: FormRules = {
  formCustomCreatePath: [
    { required: true, message: '请输入表单提交路径', trigger: 'blur' },
    { pattern: /^\/.*/, message: '路径必须以"/"开头', trigger: 'blur' }
  ],
  formCustomViewPath: [
    { required: true, message: '请输入表单查看路径', trigger: 'blur' },
    { pattern: /^\/.*/, message: '路径必须以"/"开头', trigger: 'blur' }
  ]
}

const handleDesignerSave = () => {
  debugger
  if (designerRef.value) {
    const rule = designerRef.value.getRule()
    flowStore.step2.formRule = rule
  }
}

// 表单验证方法
const validate = async (callback: (valid: boolean, errors?: string[]) => void): Promise<void> => {
	try {
		if (flowStore.step2.formType === BpmModelFormType.NORMAL) {
			// 验证动态表单
			if (designerRef.value) {
				const rule = designerRef.value.getRule()
				if (rule.length === 0) {
					callback(false, ['请设计表单内容'])
					return
				}
				flowStore.step2.formRule = rule
			}
			callback(true)
		} else if (flowStore.step2.formType === BpmModelFormType.CUSTOM) {
			// 验证自定义表单
			if (customFormRef.value) {
				await customFormRef.value.validate()
			}
			callback(true)
		} else {
			callback(false, ['请选择表单类型'])
		}
	} catch (error) {
		const errorMessage = error instanceof Error ? error.message : '表单验证失败'
		callback(false, [errorMessage])
	}
}

// 配置表单请求拦截器
FcDesigner.designerForm.fetch = FcDesigner.formCreate.fetch = (options: any) => {
	const headers: Record<string, string> = {};

	// 添加认证token
	const token = Session.getToken();
	if (token) {
		headers[CommonHeaderEnum.AUTHORIZATION] = `Bearer ${token}`;
	}

	// 添加租户ID
	const tenantId = Session.getTenant();
	if (tenantId) {
		headers[CommonHeaderEnum.TENANT_ID] = tenantId;
	}

	// 发起请求
	fetch(options.action, {
		headers,
		method: options.method,
	})
		.then(async (res) => {
			const data = await res.json();
			options.onSuccess(data);
		})
		.catch(options.onError);
};

// 初始化表单设计器
const initDesigner = async () => {
  if (!designerRef.value) return
  
  // 等待设计器完全加载
  await nextTick()
  
  try {
    // 如果还没有初始化基础组件，先初始化
    if (!isDesignerInitialized.value) {
      // 添加业务组件菜单
      designerRef.value?.addMenu({ name: 'biz', title: '业务组件', list: [], before: true })

      // 添加自定义组件
      rules.forEach((rule) => {
        designerRef.value?.addComponent(rule as DragRule)
      })
      
      isDesignerInitialized.value = true
    }

    // 如果有 formRule 数据，设置到设计器中
    if (flowStore.step2.formRule && flowStore.step2.formRule.length > 0) {
      designerRef.value.setRule(flowStore.step2.formRule)
    }
  } catch (error) {
    console.error('初始化设计器失败:', error)
  }
}

// 组件挂载后初始化
onMounted(() => {
  // 延迟初始化，确保设计器组件完全加载
  nextTick(() => {
    initDesigner()
  })
})


// 监听 formRule 数据变化和表单类型变化
watch(
  [() => flowStore.step2.formRule, () => flowStore.step2.formType],
  ([newFormRule, newType]) => {
    // 当 formRule 发生变化，或者切换到动态表单时，重新初始化设计器
    if (newFormRule || newType === BpmModelFormType.NORMAL) {
      nextTick(() => {
        initDesigner()
      })
    }
  },
  { deep: true }
)

// 暴露验证方法给父组件
defineExpose({ validate })
</script>

<style lang="scss" scoped>
// 优化表单类型选择按钮样式
:deep(.el-radio) {
  width: 100%;
  height: auto;
  margin-right: 0;
  
  // 隐藏原生单选按钮
  .el-radio__input {
    display: none;
  }
  
  .el-radio__label {
    width: 100%;
    padding-left: 0;
  }
  
  // 选中状态样式
  &.is-checked {
    .relative {
      border-color: #3b82f6 !important;
      background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
      box-shadow: 0 8px 25px -8px rgba(59, 130, 246, 0.3);
      
      // 暗黑模式下的选中状态
      [data-theme='dark'] & {
        border-color: #1d9bf0 !important;
        background: linear-gradient(135deg, rgba(29, 155, 240, 0.15) 0%, rgba(29, 155, 240, 0.08) 100%);
        box-shadow: 0 8px 25px -8px rgba(29, 155, 240, 0.3);
      }
      
      // 选中状态的标题颜色
      .font-semibold {
        color: #2563eb !important;
        
        [data-theme='dark'] & {
          color: #1d9bf0 !important;
        }
      }
      
      // 选中状态的圆形指示器
      .w-5.h-5 {
        border-color: #3b82f6 !important;
        background-color: #3b82f6;
        
        [data-theme='dark'] & {
          border-color: #1d9bf0 !important;
          background-color: #1d9bf0;
        }
        
        .w-2\.5.h-2\.5 {
          opacity: 1 !important;
          background-color: white !important;
        }
      }
    }
  }
  
  // 悬停效果增强
  &:hover:not(.is-checked) {
    .relative {
      transform: translateY(-2px);
    }
  }
}

// 添加选中状态的动画效果
.relative {
  &::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 14px;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
  }
  
  [data-theme='dark'] &::before {
    background: linear-gradient(135deg, #1d9bf0, #0284c7);
  }
}

:deep(.el-radio.is-checked) .relative::before {
  opacity: 0.1;
}

// 响应式优化
@media (max-width: 768px) {
  :deep(.el-radio-group) {
    flex-direction: column;
    gap: 12px;
  }
  
  .relative {
    padding: 16px;
  }
  
  .font-semibold {
    font-size: 16px;
  }
}

// 添加微妙的渐变背景
.relative {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  
  [data-theme='dark'] & {
    background: linear-gradient(145deg, var(--next-color-primary) 0%, var(--next-color-disabled) 100%);
  }
}

// 增强悬停时的阴影效果
.group:hover .relative {
  box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.2);
  
  [data-theme='dark'] & {
    box-shadow: 0 10px 30px -10px rgba(29, 155, 240, 0.2);
  }
}
</style>

